<!--
 * @Author       : xiaoxiaoguai
 * @Date         : 2025-06-20 19:43:22
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2025-06-20 19:43:35
 * @Description  : 
-->
<template>
  <scroll-view
    scroll-y
    :scroll-into-view="scrollIntoView"
    class="main-scroll"
    @scroll="onMainScroll"
  >
    <!-- 顶部信息 -->
    <view class="store-header">
      <view class="store-name">小龙饮品店</view>
      <swiper class="store-swiper" autoplay>
        <swiper-item v-for="i in 3" :key="i">
          <image class="swiper-img" :src="'https://via.placeholder.com/750x300?text=图' + i" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 点餐区域 -->
    <view class="order-section">
      <!-- 左侧菜单 -->
      <view class="left-menu">
        <view
          v-for="(cat, index) in categories"
          :key="cat.id"
          class="menu-item"
          :class="{ active: currentCategory === index }"
          @click="onMenuClick(index)"
        >
            {{ cat.name }}
        </view>
      </view>

      <!-- 右侧商品列表 -->
      <view class="right-list">
        <view
          v-for="(cat, index) in categories"
          :key="cat.id"
          class="category-block"
          :id="'cat-' + index"
          ref="categoryRefs"
        >
          <view class="category-title">
            {{ cat.name }}
          </view>
          <view
            v-for="item in cat.items"
            :key="item.id"
            class="product-item"
          >
            {{ item.name }}
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'

const scrollIntoView = ref('')
const currentCategory = ref(0)
const menuTop = ref(0)

const categories = reactive([
  { id: 1, name: '奶茶系列', items: genItems('奶茶') },
  { id: 2, name: '果茶系列', items: genItems('果茶') },
  { id: 3, name: '咖啡系列', items: genItems('咖啡') },
  { id: 4, name: '甜品系列', items: genItems('甜品') },
])

function genItems(label) {
  return Array.from({ length: 100 }, (_, i) => ({
    id: label + i,
    name: `${label} ${i + 1}`,
  }))
}

const categoryRefs = ref([])

onMounted(() => {
  nextTick(() => {
    uni
      .createSelectorQuery()
      .in(uni)
      .select('.store-header')
      .boundingClientRect(rect => {
        menuTop.value = rect.height
      })
      .exec()
  })
})

// 点击左侧菜单跳转右侧锚点
function onMenuClick(index) {
  scrollIntoView.value = 'cat-' + index
  currentCategory.value = index
}

function onMainScroll(e) {
  const scrollTop = e.detail.scrollTop

  uni
    .createSelectorQuery()
    .in(uni)
    .selectAll('.category-block')
    .boundingClientRect(rects => {
      let lastVisibleIndex = 0
      rects.forEach((rect, index) => {
        if (rect.top <= menuTop.value + 10) {
          lastVisibleIndex = index
        }
      })
      currentCategory.value = lastVisibleIndex
    })
    .exec()
}

</script>

<style scoped>
.main-scroll {
  height: 100vh;
}

.store-header {
  background: #fff;
}

.store-name {
  font-size: 24px;
  font-weight: bold;
  padding: 20rpx;
}

.store-swiper {
  height: 300rpx;
}

.swiper-img {
  width: 100%;
  height: 100%;
}

.order-section {
  display: flex;
  flex-direction: row;
  background: #f5f5f5;
  /* min-height: 1000rpx; */
}

/* 左侧菜单 */
.left-menu {
  width: 180rpx;
  height: 100vh;
  position: sticky;
  background: #fff;
  top: 0;
  z-index: 10;
}

.menu-item {
  padding: 20rpx;
  position: sticky;
  background: #fff;
  top: 0;
  border-bottom: 1px solid #eee;
}

.menu-item.active {
  color: #007aff;
  font-weight: bold;
}

/* 右侧商品 */
.right-list {
  flex: 1;
  background: #fff;
}

.category-block {
  padding: 20rpx;
}

.category-title {
  font-size: 20px;
  font-weight: bold;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 5;
  padding: 10rpx 0;
}

.product-item {
  padding: 10rpx 0;
  border-bottom: 1px solid #eee;
}
</style>
